import React, { Component } from "react";
import { Upload, Button, Icon } from "antd";
import { inject, observer } from "mobx-react";
import "../assets/less/FaceRecognition.less";
import VideoPlayer from "../components/common/VideoPlayer";
import $ from 'jquery'
import { Link } from 'react-router-dom'
const introduces = [
  {
    icon:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/CrossBorderHeadTracking/1.png",
    title: "大容量人体库支持",
    desc:
      "单机可支持百万量级历史人体信息库，以及在其基础上的秒级人体检索。可轻松横向扩展支持亿级人体库。"
  },
  {
    icon:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/CrossBorderHeadTracking/2.png",
    title: "低成本高可用",
    desc:
      "采用低价的软硬件组合打造高可用的存储和检索平台，降低功能门槛，让跨镜追踪再也不是价格高效果差的形象工程。"
  },
  {
    icon:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/CrossBorderHeadTracking/3.png",
    title: "算法先进",
    desc:
      "结合国际最新的研究成果，提取特征值有效信息密度高，更节约存储空间，同时获得更高的检索速度。"
  },
  {
    icon:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/CrossBorderHeadTracking/4.png",
    title: "快速搜索",
    // desc: "秒级搜索响应，支持迭代式和渐进式搜索，使得追踪操作更加易用和人性化。"
    desc: "秒级搜索响应，支持渐进式搜索，使得追踪操作更加易用和人性化。"
  }
];

const videoJsOptions = {
  controls: true,
  sources: [
    {
      src: "https://vjs.zencdn.net/v/oceans.mp4",
      type: "video/mp4"
    }
  ]
};

@inject("FaceRecognitionStore")
@observer
export default class componentName extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    window.scrollTo(0, 0);
  }

  render() {
    return (
      <div className="yl-ai-body-container">
        <div className="yl-ai-body-banner yl-ai-cross-lens">
          <div className="yl-ai-banner-opicity" />
          <div className="yl-ai-banner-txt">
            <div className="yl-ai-banner-title">人体追踪</div>
            <div className="yl-ai-banner-desc">
              人体追踪通过提取人体特征，实现在单个摄像头跨场景下行人的识别与检索。可以对无法获取清晰拍摄人脸的行人进行在单个摄像头下的连续跟踪，增强数据的时空连续性。
            </div>
          </div>
        </div>

        <div className="yl-ai-body-container">
          <div className="yl-ai-body-container-panel">
            <div className="yl-ai-body-title">产品亮点</div>
            <div className="yl-ai-body-max-width">
              <div className="yl-ai-body-introduces">
                {introduces.map((item, key) => {
                  return (
                    <div className="yl-ai-body-introduce">
                      <div className="yl-ai-body-introduce-icon">
                        <img src={item.icon} />
                      </div>
                      <div className="yl-ai-body-introduce-text">
                        <div className="yl-ai-body-introduce-title">
                          {item.title}
                        </div>
                        <div className="yl-ai-body-introduce-desc">
                          {item.desc}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>




          <div className="yl-ai-body-container-panel">
            <div className="yl-ai-body-title">功能演示</div>
            <div className="yl-ai-body-max-width ">
              <div className="yl-ai-humanRecognitionTracking-scene">
                <div className="yl-ai-humanRecognitionTracking-scene-desc">
                  <div className="yl-ai-humanRecognitionTracking-scene-desc" style={{ width: "1000px", position: "absolute" }}>
                    {/* <div className="yl-ai-humanRecognitionTracking-scene-title" >
                      人体跨镜追踪
                    </div> */}
                    <div className="yl-ai-humanRecognitionTracking-scene-desc" style={{ width: "1205px", marginTop: "-20px",marginLeft:"-380px" ,textAlign:"center"}}>
                    进入
                      <Link className="to_face_project_a"
                        to={'/Human_body_database_management'} target="_blank"
                        style={{ textDecoration: "none" }}
                        onMouseEnter={() => {
                          $(".to_face_project_a").css({
                            color: "#1B82D2"
                          });
                        }}
                        onMouseLeave={() => {
                          $(".to_face_project_a").css({
                            color: "#30AFD7"
                          });
                        }}
                      >
                     人体追踪
                        {/* <div className="to_face_project_a_icon"></div> */}
                      </Link>
                      试用页面，通过上传场景图片，进行人体图像抽取和跨镜搜索
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>




          <div className="yl-ai-body-container-panel yl-ai-body-app-scene">
            <div className="yl-ai-body-title">应用场景</div>
            <div className="yl-ai-body-max-width ">
              <div className="yl-ai-humanRecognitionTracking-scene">
                <div className="yl-ai-humanRecognitionTracking-scene-desc">
                  <div className="yl-ai-humanRecognitionTracking-scene-title">
                    时空信息查询
                  </div>
                  <div className="yl-ai-humanRecognitionTracking-scene-desc">
                    这项技术可以广泛的应用于公安、园区管理和社区治理等业务领域，实现嫌疑人定位，重点人员管控，走失人口追踪等业务目的。
                  </div>
                </div>
                <div className="yl-ai-humanRecognitionTracking-scene-img">
                  <img
                    className="scene-img"
                    src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/cross-lens/sceneImg.png"
                    title=""
                    alt=""
                  />
                  <div className="base-bg1">
                    <div></div>
                  </div>
                  <div className="base-bg2"></div>
                </div>
              </div>
            </div>
          </div>

          <div className="yl-ai-body-container-panel yl-ai-example-panel">
            <div className="yl-ai-body-title">云粒智慧应用案例</div>
            <div className="yl-ai-body-max-width">
              <div className="yl-ai-examples">
                <div className="yl-ai-example">
                  {/* <div className="yl-ai-example-title  title-h2">云鹰·智能视侦平台</div> */}
                  <div className="yl-ai-example-title  title-h2">
                    云鹰·智能城市治理平台
                  </div>

                  <div className="yl-ai-example-double-desc"></div>
                  <div className="yl-ai-example-image">
                    <img
                      src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/CrossBorderHeadTracking/exampleImg.png"
                      alt=""
                      title=""
                    />
                  </div>
                  <div className="yl-ai-examples-copyWriting">
                    云鹰智能城市治理平台是由云粒自主研发的综合利用人脸识别、人体识别、机动车识别、非机动识别、GIS等技术，帮助公安机关进行时空搜索、关联分析，以期提升破案率，保证人民生命财产安全的智能城市治理平台。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    );
  }
}
